import React, { useState } from 'react'
import { Picker } from 'antd-mobile'
import { STATUS_COLUMNS, TIME_COLUMNS } from '../const'
// import styles from '../../index.module.less'

interface SelectProps {
    label: string
    value: string
}

interface Props {
    visible: boolean
    value?: (string | null)[]
    type: 'time' | 'states'
    setVisible: (v: boolean) => void
    onChange?: (v: SelectProps[]) => void
}

export default (props: Props) => {
    const { visible, setVisible, onChange, type } = props
    const [value, setValue] = useState<(string | null)[]>(props.value || [])
    const [record, setRecord] = useState<SelectProps[]>([])
    const columns = type === 'time' ? TIME_COLUMNS : STATUS_COLUMNS
    return (
        <Picker
            columns={columns as SelectProps[][]}
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            value={value}
            onSelect={(v, { items }) => {
                setValue(v)
                setRecord(items as SelectProps[])
            }}
            onConfirm={() => {
                onChange && onChange(record)
            }}
        />
    )
}
